<script lang="ts" setup>
// 注意：实现组件 v-model 的 value，时间名必须是 update:modelValue，对应 prop 名是 modelValue
// 实现组件 v-model 的 其它自定义属性类似
const props = withDefaults(defineProps<{
    modelValue: string,
    placeholder: string
}>(), {
    placeholder: "请输入邮箱"
})
// 用于声明组件emit的事件。预期的参数与组件 emit 选项相同。
const emit = defineEmits<{
    // 声明输入邮箱发生更改事件参数类型
    (event: 'update:modelValue', value: string): void,
}>()

// 实际上是，当触发原生 input 输入事件时，获取原生输入文本，作为组件 update:modelValue 事件的触发值
function handleInput($event: Event) {
    emit('update:modelValue', ($event.target as HTMLInputElement).value)
}
</script>

<template>
    <div class="email-box">
        <input type="text" name="username" :value="modelValue" @input="$event => handleInput($event)"
            :placeholder=placeholder />
    </div>
</template>

<style lang="scss" scoped>
.email-box {
    text-align: left;

    input {
        border: none;
        padding: 9px 15px;
        margin: 8px 0;
        width: 100%;
    }

    .input-warnnings {
        font-size: 12px;
        color: red;
    }
}

@keyframes shake {
    0% {
        transform: translateX(0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-5px);
    }
    20%,
    40%,
    60%,
    80% {
        transform: translateX(5px);
    }

    100% {
        transform: translateX(0);
    }
}

.shake {
    animation: shake 0.2s;
}

.re-shake {
    animation: shake 0.2s;
}
</style>